<template>
  <div class="chat-container">
    <van-popup
        v-model:show="showLeft"
        position="left"
        :style="{ width: '80%', height: '100%' }">
        
        <div class="history-list">
          <div class="history-title">历史记录</div>
          <div class="history-body">
            <div class="history-container">
              <div class="history-time">今天</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
            </div>
            <div class="history-container">
              <div class="history-time">今天</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
            </div>
            <div class="history-container">
              <div class="history-time">今天</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
            </div>
            <div class="history-container">
              <div class="history-time">今天</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
            </div>
            <div class="history-container">
              <div class="history-time">今天</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
            </div>
            <div class="history-container">
              <div class="history-time">今天</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
            </div>
            <div class="history-container">
              <div class="history-time">今天</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
            </div>
            <div class="history-container">
              <div class="history-time">今天</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
            </div>
            <div class="history-container">
              <div class="history-time">今天</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
            </div>
            <div class="history-container">
              <div class="history-time">今天</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
            </div>
            <div class="history-container">
              <div class="history-time">今天</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
            </div>
            <div class="history-container">
              <div class="history-time">今天</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
            </div>
            <div class="history-container">
              <div class="history-time">今天</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
            </div>
            <div class="history-container">
              <div class="history-time">今天</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
            </div>
            <div class="history-container">
              <div class="history-time">今天</div>
              <div class="history-li">百度翻译打造的新一代AI大模型翻译平台,为用户提供翻译和阅读外文场景的一站式智能解决方案,支持中文、英文、日语、韩语、德语、法语等203种语言,包括文档翻译</div>
            </div>
          </div>
          <div class="personal" @click="handlePersonal">
            <div class="tou-img"></div>
            <div class="personal-name">我的</div>
          </div>
        </div>
      </van-popup>
    <div class="header">
      <i class="iconfont icon-zhedie2" @click="showLeft = true"></i>
      <div class="title">新对话</div>
      <i class="iconfont icon-faqiliaotian"></i>
    </div>
    <!-- 消息列表区域 -->
    <div class="messages" ref="messagesContainer">
      <div v-for="(message, index) in messages" :key="index" :class="['message', message.sender]">
        <div class="avatar" v-if="message.sender === 'other'">👤</div>
        <div class="content">
          <div class="bubble">{{ message.content }}</div>
          <div class="time">{{ formatTime(message.timestamp) }}</div>
        </div>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="input-area">
      <div class="add-info">
        <div class="add-message">
          <i class="iconfont icon-faqiliaotian"></i>
          <span class="btn-text">开启新对话</span>
        </div>
        <div class="add-top">
          <i class="iconfont icon-xiangshangjiantou"></i>
        </div>
      </div>
      <div class="btn-nav">
        <div class="btn-li btn-active">
          <i class="iconfont icon-shendusikao1-copy"></i>
          <span class="btn-text">深度思考（R1）</span>
        </div>
        <div class="btn-li">
          <i class="iconfont icon-wangluo"></i>
          <span class="btn-text">网络搜索</span>
        </div>
      </div>
      <div class="bg-radius">
        <input v-model="newMessage" class="message-input" type="text" placeholder="请描述您的问题，流云大模型帮您解答!"
          @keyup.enter="sendMessage" />

        <i class="iconfont icon-a-zengjiatianjiajiahaoduo"></i>
        <div class="line"></div>
        <div class="xia" @click="sendMessage">
          <i class="iconfont icon-xiangshangjiantou-copy"></i>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import dayjs from 'dayjs'
import { useRouter, useRoute } from 'vue-router';

const showLeft = ref(false);

const router = useRouter();

const handlePersonal = () => {
  router.push("/personal")
}

// 消息数据
const messages = ref([
  {
    content: '你好呀！',
    timestamp: new Date(Date.now() - 60000),
    sender: 'other'
  },
  {
    content: '你好！最近怎么样？',
    timestamp: new Date(),
    sender: 'me'
  }
])

const newMessage = ref('')
const messagesContainer = ref(null)

// 格式化时间显示
const formatTime = (time) => {
  return dayjs(time).format('HH:mm')
}

// 发送消息
const sendMessage = () => {
  if (!newMessage.value.trim()) return

  messages.value.push({
    content: newMessage.value,
    timestamp: new Date(),
    sender: 'me'
  })

  newMessage.value = ''
  scrollToBottom()
}

// 滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    if (messagesContainer.value) {
      messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
    }
  })
}

// 初始化时滚动到底部
onMounted(() => {
  scrollToBottom()
})
</script>
<style>
::-webkit-input-placeholder {
  /* placeholder颜色 */
  color: #9D9D9D;
  font-size:14px;
}
</style>

<style scoped lang="less">
.header {
  height: 46px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 0 12px;

  .title {
    flex: 1;
    width: 0;
    text-align: center;
    font-size: 14px;
  }

  .iconfont {
    font-size: 16px;
  }
}

.chat-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #ffffff;
}

.messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  padding-bottom: 150px;
}

.message {
  display: flex;
  margin-bottom: 15px;
}

.message.me {
  flex-direction: row-reverse;
}

.avatar {
  width: 36px;
  height: 36px;
  margin: 0 8px;
  background: #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content {
  max-width: 70%;
}

.bubble {
  padding: 10px 14px;
  border-radius: 18px;
  line-height: 1.4;
  position: relative;
}

.message.me .bubble {
  background: #EAF2FF;
  color: #000000;
  border-radius: 18px 18px 0 18px;
}

.message.other .bubble {
  background: white;
  color: #333;
  border-radius: 18px 18px 18px 0;
}

.time {
  font-size: 12px;
  color: #999;
  margin-top: 4px;
  padding: 0 8px;
}

.message.me .time {
  text-align: right;
}

.input-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 12px;

  .btn-nav{
    display: flex;
    height: 30px;
    margin-bottom:8px;
    .btn-li{
      border-radius: 15px;
      height: 30px;
      background: #E8E8E8;
      padding:0 12px;
      display:flex;
      align-items:center;
      margin-right:8px;
      color: #000000;
      .iconfont{
        margin-right:4px;
        font-size:14px;
      }
      .btn-text{
        line-height: 30px;
        font-size: 12px;
      }
    }
    .btn-active{
      background: #1777FF;
      color: #FFFFFF;
    }
  }

  .bg-radius {
    background: #E8E8E8;
    height: 46px;
    width: 100%;
    border-radius: 23px;
    display: flex;
    align-items: center;
    padding-right: 16px;
    // padding:0 16px;
  }

  // border-top: 1px solid #eee;
}

.history-list{
  
  display:flex;
  flex-direction: column;
  height: 100%;
  // overflow-y: auto;
  .history-title{
    padding: 16px;
    font-size:18px;
    color:#333333;
  }
  .history-body{
    padding: 0 16px;
    flex:1;
    height:0;
    overflow-y:auto;
    .history-container{
      margin-bottom:12px;
      .history-time{
        color: #B2B2B2;
        font-size: 14px;
        margin-bottom: 6px;
      }
      .history-li{
        overflow: hidden;/* 超出的文本隐藏 */
        text-overflow: ellipsis;/* 用省略号显示 */
        white-space: nowrap;/* 不换行 */
        margin-bottom: 6px;
        font-size: 14px;
      }
    }
  }
}

.message-input {
  flex: 1;
  padding: 8px 12px;
  border: 0;
  background: rgba(0, 0, 0, 0);
  outline: none;
  font-size: 16px;
}
.icon-a-zengjiatianjiajiahaoduo{
  color:#000000;
  font-size: 20px;
}
.xia{
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background: #1777FF;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#FFFFFF;
}
button {
  padding: 8px 16px;
  background: #07c160;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
}
.line{
  height: 12px;
  width:1px;
  margin:0 12px;
  background: #A8A8A8;
}
.add-message{
  height: 30px;
  border:1px solid #E9E9E9;
  align-items:center;
  padding:0 12px;
  border-radius: 15px;
  justify-content:center;
  .iconfont{
    margin-right: 4px;
  }
}
.add-info{
  display:flex;
  justify-content:center;
  margin-bottom: 12px;
  position:relative;
  .add-top{
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border:1px solid #E9E9E9;
    position:absolute;
    right:16px;
    text-align:center;
    line-height: 28px;
    font-size:16px;
    color:#333333;
  }
}
.personal{
  padding: 12px 16px;
  display:flex;
  align-items:center;
  .tou-img{
    width: 30px;
    height: 30px;
    margin-right:12px;
    border-radius: 100%;
    background-image: url("@/assets/header.jpg");
    background-size: 100% 100%;
  }
  .personal-name{
    font-size:16px;
  }
}
</style>
